<template>
  <div class="wrapper">
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              fit="fill"
            ></el-image>
          </el-col>
          <el-col :span="18">
            <el-descriptions title="桥梁工程（第2版）">
              <el-descriptions-item label="作者"
                >kooriookami</el-descriptions-item
              >
              <el-descriptions-item label="出版"
                >18100000000</el-descriptions-item
              >
              <el-descriptions-item label="页数">9999</el-descriptions-item>
              <el-descriptions-item label="时间">
                <el-tag size="small">2022-02-29</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="">
                <el-button type="text" icon="el-icon-position">2.3k</el-button>
                <el-button type="text" icon="el-icon-star-on">321</el-button>
                <el-button
                  type="text"
                  icon="el-icon-collection-tag"
                >55</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-descriptions title="内容摘要">
              <el-descriptions-item label=""
                >
<router-link tag="a" :to="{ path: '/textbook', query: {} }">
  本教材自2017年2月发行以来已使用了6年多，在此期间，新材料、新工艺的使用以及一批高水平大跨径桥梁相继建成，大大提升了我国桥梁的设计与建造水平。为跟上时代步伐，适应长安大学道路桥梁与渡河工程专业的课改要求，对第一版内容进行了以下补充及修改：</router-link>
</el-descriptions-item
              ></el-descriptions>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="目录" name="first"> </el-tab-pane>
              <el-tab-pane label="书签" name="second">
                <el-table :data="list0" border style="width: 100%">
                  <el-table-column prop="auth" label="页码"></el-table-column>
                  <el-table-column prop="name" label="描述"></el-table-column>
                  <el-table-column prop="pubTim" label="时间"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        icon="el-icon-s-check"
                      ></el-button>
                      <el-button
                        type="text"
                        size="small"
                        icon="el-icon-upload2"
                      ></el-button>
                      <el-button
                        type="text"
                        size="small"
                        icon="el-icon-remove-outline"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="讨论" name="fith"> </el-tab-pane>
              <el-tab-pane label="收藏" name="third">
                <el-table :data="list" border style="width: 100%">
                  <el-table-column prop="auth" label="作者"></el-table-column>
                  <el-table-column prop="name" label="名称"></el-table-column>
                  <el-table-column
                    prop="press"
                    label="出版社"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        icon="el-icon-s-check"
                      ></el-button>
                      <el-button
                        type="text"
                        size="small"
                        icon="el-icon-upload2"
                      ></el-button>
                      <el-button
                        type="text"
                        size="small"
                        icon="el-icon-remove-outline"
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      activeName:'second',
      url: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
      list: [
        {
          auth: "鲁西南",
          name: "第一章 概论",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
        {
          auth: "第二节 桥梁结构体系与基本组成",
          name: "大号书屋",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
        {
          auth: "第三节 桥梁基本组成",
          name: "大号书屋",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
      ],
      list0: [
        {
          auth: "12",
          name: " 第一章 概论",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
        {
          auth: "25",
          name: "第二节 桥梁结构体系与基本组成",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
        {
          auth: "56",
          name: "第三节 桥梁基本组成",
          press: "长江出版社",
          pubTim: "2022-02-29",
        },
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleClick(){}
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.wrapper {
}
</style>